<template>
    <div id='safePortraitstyle' class="main">
       <div class="title">
               <p >资产{{tablenewtimewebsite.info_sys_name}} 安全状态画像</p>
               <p  style="fontWeight: normal; 
                          fontSize:12px; 
                          float:right; 
                          margin-right:20px;">更新时间：{{tablenewtimewebsite.static_time}}</p>
       </div>
       <div class="contain">
           <div class="box1">
               <div class="title" style="border:none ;borderBottom: 1px solid #EEEEEE; fontSize:12px;">
                   <p style="fontSize:12px;">基础信息</p>
               </div>
               <div>
                 

               </div>
               <div>
                   <table style="width:100%">
                            <tr>
                            <td class="keyValue">系统名称</td>
                            <td class="valValue">{{tablewebsitemsg['info_sys_name']}}</td>
                            <td class="keyValue">部署日期</td>
                            <td class="valValue">{{tablewebsitemsg['deploy_date']}}</td>
                        </tr>
                        <tr>
                            <td class="keyValue">所属机构</td>
                            <td class="valValue">{{tablewebsitemsg['node_name']}}</td>
                            <td class="keyValue">节点总数</td>
                            <td class="valValue">{{tablewebsitemsg['node_num']}}</td>
                        </tr>
                        <tr>
                            <td  class="keyValue">描述</td>
                            <td class="valValue">{{tablewebsitemsg['sys_desc']}}</td>
                        </tr>
                   </table>
               </div>

           </div>
           <div class="box2" style="overflow:hidden">
               <div class="title" style="border:none ;borderBottom: 1px solid #EEEEEE; fontSize:12px;">
                   <p style="fontSize:12px;">系统安全评分</p>
               </div>
               <div class="box2b" >
                   <div style="float:left; width:24%; text-align: center; margin-top: 50px;">
                       <canvas id="canvas" width="200" height="200" ></canvas>
                      <p style="margin-top:10px; color:#5c6781">排名：{{tablescoringrank.all_scorerink}}/{{websitenum}}</p>
                   </div>
                   <div id="drawradar" style="width:24% ; height:260px;  margin-top: 30px; float:left "></div>
                   <div style="float:left; border-left:1px solid #eeeeee; width:52%; padding:12px;">
                     <div id="drawddline" style="width:100% ; height:280px;"></div>
                   </div> 
               </div>
           </div>
           <div class="box4" style="width:100%">
               <table class="mailTable">
                  <!-- 实时风险 -->
                  <tr>
                      <td style="width:18%" class="contain_column" rowspan="7">
                          <p style="font-size:24px; #5c6781; text-align:center">实时风险</p>
                          <p  class="fontscore"
                              :style="tablescoringrank.real_score<20 ?  ' color: #FF3333;' 
                                      :tablescoringrank.real_score<40 ? ' color: #ff6633;' 
                                      :tablescoringrank.real_score<60 ? ' color: #ff9933;'
                                      :tablescoringrank.real_score<80 ? ' color: #ffc833;'
                                      : 'color: #02bc77;'">{{tablescoringrank.real_score}}</p>
                          <p style="font-size:12px; text-align:center">排名：{{tablescoringrank.real_scorerink}}</p>
                      </td>
                      <td style="width:18%" class="contain_column fontStyle1" rowspan="2">攻击事件</td>
                      <td style="width:23%" class="contain_column fontStyle1">攻击事件数量
                      </td>
                      <td class="contain_column fontStyle0">{{tablerealrisk.attck_event_num}}个
                      </td>
                  </tr>

                  <tr>
                      <td class="contain_column fontStyle1">重点攻击事项</td>
                      <td class="contain_column fontStyle0">
                          {{tablerealrisk.import_attackevent_num}}个
                      </td>
                  </tr>
                  <!-- 暗链 -->
                  <tr>
                      <td class="contain_column fontStyle1" rowspan="5">影响资产总数： {{tablerealrisk.all_assert_num}}个</td>
                      <td class="contain_column fontStyle1">
                          保护等级为1级的受损资产
                      </td>
                      <td class="contain_column fontStyle0">
                        {{tablerealrisk.step1_assert_num}}个
                      </td>
                  </tr>
                 
                  <tr>
                      <td class="contain_column fontStyle1">保护等级为2级的受损资产</td>
                      <td class="contain_column fontStyle0">
                          {{tablerealrisk.step2_assert_num}}个
                      </td>
                  </tr>

                  <tr>
                      <td class="contain_column fontStyle1">保护等级为3级的受损资产</td>
                      <td class="contain_column fontStyle0">
                          {{tablerealrisk.step3_assert_num}}个
                      </td>
                  </tr>

                  <tr>
                      <td class="contain_column fontStyle1">保护等级为4级的受损资产</td>
                      <td class="contain_column fontStyle0">
                          {{tablerealrisk.step4_assert_num}}个
                      </td>
                  </tr>

                  <tr>
                      <td class="contain_column fontStyle1">保护等级为5级的受损资产</td>
                      <td class="contain_column fontStyle0">
                          {{tablerealrisk.step5_assert_num}}个
                      </td>
                  </tr>

                  <!-- 运行情况 -->
                  <tr>
                      <td class="contain_column">
                          <p style="font-size:24px; #5c6781; text-align:center">运行情况</p>
                          <p  class="fontscore" 
                            :style=" tablescoringrank.usability_score<20 ?   'color: #FF3333;' 
                                      :tablescoringrank.usability_score<40 ? 'color:#ff6633; ' 
                                      :tablescoringrank.usability_score<60 ? 'color: #ff9933;'
                                      :tablescoringrank.usability_score<80 ? 'color: #ffc833;'
                                      : 'color: #02bc77;'">{{tablescoringrank.usability_score}}</p>
                          <p style="font-size:12px; text-align:center">排名：{{tablescoringrank.usability_scorerink}}</p>
                      </td>
                      <td class="contain_column fontStyle1">当前活跃节点数： {{tableusability.nowliving_node}} 个</td>
                      <td class="contain_column">
                          <p class="fontStyle1" style="border-bottom: 1px solid #eee" >活跃最大节点数： {{tableusability.usability.max_node_num}}个</p>
                          <p class="fontStyle1">活跃最小节点数： {{tableusability.usability.min_node_num}}个</p>  
                      </td>
                      <td id='linedd'  class="contain_column" >
                      </td>
                  </tr>
                  
                   <!-- 运营能力 -->
                  <tr>
                      <td class="contain_column">
                          <p style="font-size:24px; #5c6781; text-align:center">运营能力</p>
                          <p  class="fontscore"
                                      :style=" tablescoringrank.all_handle_score<20 ? ' color: #FF3333; ' 
                                      :tablescoringrank.all_handle_score<40 ? ' color:#ff6633; ' 
                                      :tablescoringrank.all_handle_score<60 ? ' color: #ff9933; '
                                      :tablescoringrank.all_handle_score<80 ? ' color: #ffc833; '
                                      : ' color: #02bc77;'">{{tablescoringrank.all_handle_score}}</p>
                          <p style="font-size:12px; text-align:center">排名：{{tablescoringrank.all_handle_scorerink}}</p>
                      </td>
                      <td class="contain_column fontStyle1">总风险数：{{tableoperate
                          .total_risk}}个</td>
                      <td class="contain_column">
                          <p class="fontStyle1" style="border-bottom: 1px solid #eee" >已处置数 {{tableoperate
                          .read_risk}}</p>
                          <p class="fontStyle1">未处置数 {{tableoperate
                          .not_operate_risk_num}}</p>  
                      </td>
                      <td id = 'operate'  class="contain_column" >
                        面积图
                      </td>
                  </tr>
                  <!-- 风险预警 -->
                  <tr>
                      <td class="contain_column">
                          <p style="font-size:24px; #5c6781; text-align:center">风险预警</p>
                          <p class="fontscore" :style=" tablescoringrank.warning_score<20 ? ' color: #FF3333; ' 
                                      :tablescoringrank.warning_score<40 ? ' color:#ff6633; ' 
                                      :tablescoringrank.warning_score<60 ? ' color: #ff9933; '
                                      :tablescoringrank.warning_score<80 ? ' color: #ffc833; '
                                      :'color: #02bc77;'">{{tablescoringrank.warning_score}}</p>
                          <p style="font-size:12px; text-align:center">排名：{{tablescoringrank.warning_scorerink}}</p>
                      </td>
                      <td class="contain_column fontStyle1" >风险事项</td>
                      <td class="contain_column">
                          <p class='fontStyle0' v-for="(item, i) in  tableriskwarning" :key="i" >
                                    <at-tooltip  :disabled="item.risk_item.length<51"  
                                        :content= "item.risk_item" 
                                        :placement="'top'"
                                        >
                                        <span style="overflow: hidden;
                                            white-space: nowrap; 
                                            display: inline-block; 
                                            text-overflow: ellipsis;
                                            width:96%">
                                            
                                            {{item.risk_item}}
                                        </span>
                                    </at-tooltip>
                                </p>
                      </td>
                      <td class="contain_column">
                          <p class='fontStyle0' v-for="(item, i) in  tableriskwarning" :key="i" >
                                    <at-tooltip  :disabled="item.risk_item.length<51"  
                                        :content= "item.risk_item" 
                                        :placement="'top'"
                                        >
                                        <span style="overflow: hidden;
                                            white-space: nowrap; 
                                            display: inline-block; 
                                            text-overflow: ellipsis;
                                            width:96%">
                                              影响资产{{item.effect_assert_num}}个
                                        </span>
                                    </at-tooltip>
                                </p>
                      </td>
                  </tr>
                  <!-- 历史安全 -->
                  <tr>
                      <td class="contain_column">
                          <p style="font-size:24px; #5c6781; text-align:center">历史安全</p>
                          <p  class="fontscore" :style=" tablescoringrank.avg_all_score<20 ? 'color: #FF3333; ' 
                                      :tablescoringrank.avg_all_score<40 ? 'color:#ff6633; ' 
                                      :tablescoringrank.avg_all_score<60 ? 'color: #ff9933; '
                                      :tablescoringrank.avg_all_score<80 ? 'color: #ffc833; '
                                      : 'color: #02bc77;'">{{tablescoringrank.avg_all_score}}</p>
                          <p style="font-size:12px; text-align:center">排名：{{tablescoringrank.avg_all_scorerink}}</p>
                      </td>
                      <td class="contain_column fontStyle1" >系统历史安全</td>
                      <td class="contain_column">
                          <p class='fontStyle0' >综合安全平均评分</p>
                          <p class='fontStyle0'>实时风险平均评分</p>
                          <p class='fontStyle0'>运行情况平均评分</p>
                          <p class='fontStyle0'>运营能力平均评分</p>
                          <p class='fontStyle0'>风险预警平均评分</p>
                      </td>
                      <td class="contain_column">
                        <p class='detectionResult'>{{tablehistorySecurity.avg_all_score}}分</p>
                        <p class='detectionResult'>{{tablehistorySecurity.avg_real_score}}分</p>
                        <p class='detectionResult'>{{tablehistorySecurity.avg_run_score}}分</p>
                        <p class='detectionResult'>{{tablehistorySecurity.avg_all_handle_score}}分</p>
                        <p class='detectionResult'>{{tablehistorySecurity.avg_warning_score}}分</p>
                      </td>
                  </tr>
               </table>
           </div>
       </div>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'safetyProhome',
  data () {
    return {
      activeName: 'first',
      flag: true
    }
  },
  computed: {
    ...mapState({
      tablerealrisk: state => state.safePortraiat.tablerealrisk,
      tableusability: state => state.safePortraiat.tableusability,
      tableoperate: state => state.safePortraiat.tableoperate,
      tableriskwarning: state => state.safePortraiat.tableriskwarning,
      tablehistorySecurity: state => state.safePortraiat.tablehistorySecurity,
      tablescoringrank: state => state.safePortraiat.tablescoringrank,
      tablenewtimewebsite: state => state.safePortraiat.tablenewtimewebsite,
      changeSizeValue: state => state.system.changeSizeValue,
      tablewebsitemsg: state => state.safePortraiat.tablewebsitemsg,
      tableactivetag: state => state.safePortraiat.tableactivetag,
      websitenum: state => state.safePortraiat.websitenum
    })
  },
  methods: {
    handleClick (tab, event) {
      if (this.activeName == 'first') {
        this.flag = true
      } else {
        this.flag = false
      }
    }
  },
  watch: {
    changeSizeValue () {
      if (document.getElementById('drawddline')) {
        this.$echarts.init(document.getElementById('drawddline')).resize()
      }
    },
    $route (to, from) {
      if (document.getElementById('drawddline')) {
        this.$echarts.init(document.getElementById('drawddline')).resize()
      }
    }
  },
  mounted () {
    if (this.$route.params.safewebsite_id !== undefined && this.$route.params.safewebsite_id !== '') {
      this.$store.dispatch('safePortraiat/safescore', this.$route.params.safewebsite_id)
      this.$store.dispatch('safePortraiat/scoreranking', this.$route.params.safewebsite_id)
      this.$store.dispatch('safePortraiat/avgscore', this.$route.params.safewebsite_id)
      this.$store.dispatch('safePortraiat/newtimewebsite', this.$route.params.safewebsite_id)
      this.$store.dispatch('safePortraiat/getwebmsg', this.$route.params.safewebsite_id)
    }
  }
}
</script>
<style lang='less' scoped>
#safePortraitstyle{
    width:100%;
    border:1px solid #eeee;
    background:#FFFFFF;
} 
#safePortraitstyle .title{
    width: 100%;
    height:50px;
    overflow:hidden;
    border: 1px solid #eeeeee;
    border-bottom: none;
}
#safePortraitstyle .title p {
   margin-left:20px; 
   float:left;
   line-height:50px; 
   height:50px; 
   color:#5c6781; 
   font-size:14px;
   font-weight: 900;
}
#safePortraitstyle .contain{
   border:1px solid #eeeeee; 
   padding: 20px;
   /* 子浮动 float:left，父overflow: hidden; */
   overflow: hidden;
   background:#FFFFFF;
} 

#safePortraitstyle .box1,.box2{
   margin-bottom:20px;
   border: 1px solid #EEEEEE;
}
#safePortraitstyle .box3{
    width: 98%;
}
#safePortraitstyle .box4{
    width:98%;
    /* float:left; */
    margin-top: 26px;
    /* color: #B7C3D9; */
}
#safePortraitstyle .box2b{
    width:100%;
    height: 300px;
    overflow: hidden;
   
    }
#safePortraitstyle .box3b1,.box3b2{
    width:100%;
    /* padding: 20px 0; */
} 
#safePortraitstyle .key_column{
    width:60px;
    height:44px;
    background: #F8F8F8;
    border:1px solid #EEEEEE;
}  
#safePortraitstyle .value_column{
    width:100px;
    height:44px;
    background: #FFFF;
    border:1px solid #EEEEEE;
} 
#safePortraitstyle .mailTable{
    width:100%;
}
#safePortraitstyle .header_column{
   height:40px;
   background: #F8F9FA; 
   border:1px solid #EEEEEE;
   line-height: 40px;
   padding-left:20px;
   color: #5c6781;
   font-size: 12px;
   font-weight: 900; 
}
#safePortraitstyle .fontStyle0{
  margin:0; 
  color:#8992a7; 
  padding-left:20px;
  height: 40px;
  line-height: 40px;
}
#safePortraitstyle .fontStyle1{
  margin:0; 
  color:#5c6781; 
  padding-left:20px;
  height: 68px;
  line-height: 68px;
}
#safePortraitstyle .contain_column{
    background: #FFFFFF; 
    height: 40px;
    line-height: 40px;
    border: 1px solid #EEEEEE;
}
#safePortraitstyle .infoheader{
   color:#0000; 
   font-size:16px; 
   line-height:40px;
   padding:0 20px;  
   border:1px solid #EEEEEE;
}
#safePortraitstyle .detectionResult{
    font-weight: 900;
    font-size: 12px;
    color: #5c6781;
    padding-left:20px;
    margin: 0px;
    height: 40px;
}


#safePortraitstyle .keyValue {
  height: 40px; 
  line-height: 40px; 
  width: 12%;
  text-align: right;
  padding-right: 20px; 
  color:#5c6781;
}
#safePortraitstyle .valValue {
  height: 40px; 
  line-height: 40px; 
  width: 38%;
  background:#FFFF;
  padding-left: 20px;
  /* border:1px solid red */
}
#safePortraitstyle .fontscore {
    font-family: Microsoft YaHei;
    font-size:60px; 
    text-align:center 
}
</style>
<style>
#safePortraitstyle  .at-tabs__nav-scroll{
  border-bottom: 1px solid #eeeeee;
  overflow: visible;
  height: 30px;
}
#safePortraitstyle .at-tabs--border-card>.at-tabs__header .at-tabs__item{
   transition:none
}
#safePortraitstyle  .at-tabs--border-card>.at-tabs__header .at-tabs__item.is-active{
  color: #1f92ef;
  font-weight: 900;
}
</style>
